<template>
  <div
    class="chat-friend-item flex items-center px-4 py-3 cursor-pointer select-none"
    :class="{ 'bg-blue-50': active }"
  >
    <img :src="session.avatar" class="w-10 h-10 rounded-full mr-3" />
    <div class="flex-1 min-w-0">
      <div class="flex items-center gap-2">
        <span class="font-medium truncate">{{ session.name }}</span>
        <el-tag v-if="session.online" size="small" type="success">在线</el-tag>
      </div>
      <div class="text-xs text-gray-400 truncate max-w-xs">{{ session.lastMessage || '暂无聊天记录' }}</div>
    </div>
    <el-badge v-if="session.unread > 0" :value="session.unread" class="ml-2" />
  </div>
</template>

<script setup>
const props = defineProps({
  session: { type: Object, required: true },
  active: { type: Boolean, default: false }
})
</script>

<style scoped>
.chat-friend-item {
  transition: background 0.2s;
}
</style> 